<template>
  <div class="home">
    <div class="layout_box">
      <div class="layout warp">
        <div class="adress">
          <div class="bdType">
            <div class="TypeTitle Title">
              <div class="bgc">
                <i class="el-icon-menu"></i>
              </div>
              <H3>标的类型</H3>
            </div>
            <ul>
              <li v-for="item in LotsTypeData" :key="item.id" @click="lotsTypeGoLots(item.id)">{{item.classname}}</li>
            </ul>
          </div>
          <div class="bdAdress">
            <div class="addressTitle Title">
              <div class="bgc"> 
                <i class="el-icon-location"></i>
              </div>
              <H3>标的所在地</H3>
            </div>
            <ul>
              <li v-for="item in ProvinceData" :key="item.id" @click="adressGoLots(item.id)">{{item.shortname}}</li>
            </ul>
          </div>
        </div>
        <div class="block"> 
          <layoutSwiper :banner-data="bannerData"/>
        </div>
        <div class="help_r">
          <div class="help_r_first">
            <div v-if="!uid" class="login_header_c">
                <img src="@/assets/home/touxiang.png" alt="">
                <p class="welcome_w">hi,欢迎来到盟拍网</p>
                <div class="login_btn_two">
                  <button class="btn_line" @click="$router.push('/user/register')">免费注册</button>
                  <v-btn type="plain" size="mini" @click="$router.push('/login')">
                    快捷登录
                  </v-btn>
                </div>
              </div>
              <div v-else class="login_suc">
                <div class="head_portrait">
                  <img src="@/assets/home/touxiang.png" alt="">
                  <div class="name_r">
                    <p class="name_up">{{userInfo.username}}</p>
                    <p class="ophone_down">{{userInfo.mobile}}</p>
                  </div>
                </div>
                <div class="my_type">
                  <p class="my_cp" @click="goMycanpai">
                    <span>我的参拍</span>
                  </p>
                  <p class="my_gz" @click="goMyguanzhu">
                    <span>我的关注</span>
                  </p>
                </div>
              </div>
              <div class="h_first_title">
                <p class="line"></p>
                <p>帮助中心</p>
                <p class="line"></p>
              </div>
              <div class="h_first_one">
                <p>
                  <span @click="helpGo('3-')">竞拍流程</span>
                  <span @click="helpGo('4-')">收费规则</span>
                </p>
                <p>
                  <span @click="helpGo('1-6')">出价规则</span>
                  <span @click="helpGo('1-5')">成交规则</span>
                </p>
                <p>
                  <span @click="helpGo('6-10')">常见问题</span>
                  <span @click="helpGo('7-3')">更多>></span>
                </p>
              </div>
            </div>
            
            
          <!-- </div> -->
          <!-- <div class="help_r_second">
            <div class="h_second_title">
              <p class="line"></p>
              <p>联系客服</p>
              <p class="line"></p>
            </div>
            <div class="h_second_con">
              <p class="phone">18731185621</p>
              <p class="s_c_btn"><i class="el-icon-service"></i>在线客服</p>
            </div>
          </div> -->
          <div class="help_r_third">
            <div  @click="goWasteShoppingPage('1')" class="r_t_btn">
              <p class="btn_style"><i class="el-icon-sold-out"></i>出租出售</p>
            </div>
            <div @click="goWasteShoppingPage('3')">
              <p class="btn_style"><i class="el-icon-sell"></i>求租求购</p>
            </div>
          </div>
        </div>
      </div> 
      <!-- 企业入驻图片 -->
      <div class="img_type warp">
        <div v-for="item in AdvList" :key="item.id">
          <img :src="imgurls+item.image" alt="" @click="gofirmInPage">
        </div>
      </div>
      <!-- 竞拍流程 -->
      <div class="auctionFlow warp">
        <dl class="af_line">
          <dt>
            <a href="">竞拍流程</a>
          </dt>
          <dd v-for="(item,i) in flowArr" :key="i">
            <div class="icon_one">
              <img :src="item.url" alt="">
            </div>
            <div class="icon_two">
              <p class="i_t_one">{{item.line}}</p>
              <p class="i_t_two">{{item.flowCon}}</p>
            </div>
            <i v-if="i+1 < flowArr.length" class="el-icon-d-arrow-right icon_red"></i>
          </dd>
        </dl>
      </div>
    </div>
   
    
    <!-- 拍卖标的 -->
    <div class="warp makeBargain" v-if="LotsData.length>0">
      <div class="style_tit_box">
        <!-- <v-title
          :content="content"
          :font-size="22"
          class="tit"
        /> -->
        <div class="tit_new">
          <span class="red_w">热门</span>
          <span class="black">拍卖标的</span>
        </div>
        <div class="evenMore" @click="goLots">更多<i class="el-icon-d-arrow-right"></i></div>
      </div>
      
      <!-- <el-empty v-if="LotsData.length<1" description='暂无数据' :image-size="300"></el-empty>  -->
      <div class="card"> 
        <ul class="pai-item-list">
            <li v-for="(val,i) in LotsData" :key="i" class="pai-item">
                <div class="link_wrap"  @click="routeDetail(val)">
                    <el-card class="item_card" :body-style="{ padding: '0px' }">
                    <div class="image">
                        <!-- <img src="@/assets/29065392043055d6e199749099f4cadc.jpg" class="lot_pic"> -->
                        <el-image :src="imgurls+ val.image" alt="" class="lot_pic"></el-image>
                         <div v-if="val.state=='7'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    
                                    等待拍卖师操作
                                </span>
                            </div>
                            <div v-if="val.state=='1'" class="img-mask">
                                <span class="greenBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#67C23A" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#67C23A" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    即将开始
                                </span>
                            </div><div v-if="val.state=='2'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    正在进行
                                </span>
                            </div><div v-if="val.state=='3'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    已成交
                                </span>
                            </div><div v-if="val.state=='4'" class="img-mask">
                                <span class="grayBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#949494" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#949494" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    已流拍
                                </span>
                            </div><div v-if="val.state=='5'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    已撤拍
                                </span>
                            </div>
                            <div v-if="val.state=='6'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    等待拍卖师操作
                                </span>
                            </div>
                      </div>
                    
                    <div class="item_content">
                        <div class="item_title">
                          <div class="in_item_title" :title="val.name">
                                    {{val.name}}
                                </div>
                        </div>
                        <div class="item_money">
                        <p>
                            <span v-if="val.state=='1'||val.state=='4'||val.state=='5'">起拍价</span>
                            <span v-if="val.state=='2'||val.state=='6'||val.state=='7'">当前价</span>
                            <span v-if="val.state=='3'">成交价</span>

                            <span v-if="val.state=='2'||val.state=='3'||val.state=='5'||val.state=='5'||val.state=='6'||val.state=='7'" class="red moneyBig">
                              {{val.prices| formatNumber}}元
                              <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                            </span>
                            <span v-if="val.state=='4'" class="gray moneyBig">
                              {{val.prices| formatNumber}}元
                              <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                            </span>
                            <span v-if="val.state=='1'" class="green moneyBig">
                              {{val.prices| formatNumber}}元
                              <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                            </span>
                            
                        </p>
                        <div v-if="val.state=='1'" class="item_money_time">
                            <p>预计{{val.time}}开始</p>
                            <!-- <p class="greenBtn">即将开始</p> -->
                        </div>
                        <div v-if="val.state=='2'" class="item_money_time">
                            <p>预计{{val.time}}结束</p>
                            <!-- <p class="redBtn">正在进行</p> -->
                        </div>
                        <div v-if="val.state=='3'" class="item_money_time">
                            <p>{{val.time}}结束</p>
                            <!-- <p class="redBtn">已成交</p> -->
                        </div>
                        <div v-if="val.state=='4'" class="item_money_time">
                            <p>{{val.time}}结束</p>
                            <!-- <p class="grayBtn">已流拍</p> -->
                        </div>
                        <div v-if="val.state=='5'" class="item_money_time">
                            <p>{{val.time}}结束</p>
                            <!-- <p class="redBtn">已撤拍</p> -->
                        </div>
                        <div v-if="val.state=='6'" class="item_money_time">
                            <p>预计{{val.time}}结束</p>
                            <!-- <p class="redBtn">等待拍卖师操作</p> -->
                        </div>
                        <div v-if="val.state=='7'" class="item_money_time">
                            <p>预计{{val.time}}结束</p>
                            <!-- <p class="redBtn">等待拍卖师操作</p> -->
                        </div>
                        </div>  
                        <div class="item_bottom clearfix">
                            <div>
                            <span>{{val.viewcount}}次围观</span>
                            </div>
                            <!-- <el-divider direction="vertical"></el-divider> -->
                            <div>
                            <span>{{val.history_count}}次出价</span>
                            </div>
                            <!-- <el-divider direction="vertical"></el-divider> -->
                            <div>
                                <i class="el-icon-star-on" :class="[val.isfollow == 1? 'red' : '']" style="font-size:16px" @click="attentionStar(val.id)"></i>
                                <span>关注</span>
                            </div>
                        </div>
                    </div>
                </el-card>
                </div>  
            </li>
        </ul>
      </div>
    </div>
    <!-- 成交案例 -->
    <div class="warp makeBargain"  v-if="DealLots.length>1" >
      <div class="style_tit_box">
        <!-- <v-title
          :content="content1"
          :font-size="22"
          class="tit"
        /> -->
        <div class="tit_new">
          <span class="red_w">热门</span>
          <span class="black">成交案例</span>
        </div>
        <div class="evenMore" @click="goCaseLibrary">更多<i class="el-icon-d-arrow-right"></i></div>
      </div>
      <!-- <el-empty description='暂无数据' :image-size="300"></el-empty>  -->
      <div class="card"> 
        <ul class="pai-item-list">
                <li v-for="(val,i) in DealLots" :key="i" class="pai-item">
                    <div class="link_wrap" @click="routeDetail(val)">
                        <el-card class="item_card" :body-style="{ padding: '0px' }">
                        <div class="image">
                            <!-- <img src="@/assets/29065392043055d6e199749099f4cadc.jpg" class="lot_pic"> -->
                            <el-image :src="imgurls+ val.image" alt="" class="lot_pic"></el-image>
                            <div v-if="val.state=='1'" class="img-mask">
                                <span class="greenBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#67C23A" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#67C23A" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    即将开始
                                </span>
                            </div><div v-if="val.state=='2'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    正在进行
                                </span>
                            </div><div v-if="val.state=='3'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    已成交
                                </span>
                            </div><div v-if="val.state=='4'" class="img-mask">
                                <span class="grayBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#949494" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#949494" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    已流拍
                                </span>
                            </div><div v-if="val.state=='5'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    已撤拍
                                </span>
                            </div>
                            <div v-if="val.state=='6'" class="img-mask">
                                <span class="redBtn">
                                    <svg class="wait-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:middle;margin-right:6px;"><circle cx="8" cy="8" r="7" stroke="#E43D33" stroke-width="2" fill="#fff"/><path d="M8 4.5V8L10.5 10" stroke="#E43D33" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    等待拍卖师操作
                                </span>
                            </div>
                          </div>
                        
                        <div class="item_content">
                            <div class="item_title">
                              <div class="in_item_title" :title="val.name">
                                    {{val.name}}
                                </div>
                            </div>
                            <div class="item_money">
                            <p>
                                <span v-if="val.state=='1'||val.state=='4'||val.state=='5'">起拍价</span>
                                <span v-if="val.state=='2'||val.state=='6'||val.state=='7'">当前价</span>
                                <span v-if="val.state=='3'">成交价</span>

                                <span v-if="val.state=='2'||val.state=='3'||val.state=='5'" class="red moneyBig">
                                  {{val.prices| formatNumber}}元
                                  <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='4'" class="gray moneyBig">
                                  {{val.prices| formatNumber}}元
                                  <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                <span v-if="val.state=='1'" class="green moneyBig">
                                  {{val.prices| formatNumber}}元
                                  <span class="m_rmb" v-if="val.unit">/{{val.unit}}</span>
                                </span>
                                
                            </p>
                            <div v-if="val.state=='1'" class="item_money_time">
                                <p>预计{{val.time}}开始</p>
                                <!-- <p class="greenBtn">即将开始</p> -->
                            </div>
                            <div v-if="val.state=='2'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <!-- <p class="redBtn">正在进行</p> -->
                            </div>
                            <div v-if="val.state=='3'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <!-- <p class="redBtn">已成交</p> -->
                            </div>
                            <div v-if="val.state=='4'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <!-- <p class="grayBtn">已流拍</p> -->
                            </div>
                            <div v-if="val.state=='5'" class="item_money_time">
                                <p>{{val.time}}结束</p>
                                <!-- <p class="redBtn">已撤拍</p> -->
                            </div>
                            <div v-if="val.state=='6'" class="item_money_time">
                                <p>预计{{val.time}}结束</p>
                                <!-- <p class="redBtn">等待拍卖师操作</p> -->
                            </div>
                            </div>  
                            <div class="item_bottom clearfix">
                                <div>
                                <span>{{val.viewcount}}次围观</span>
                                </div>
                                <div>
                                <span>{{val.history_count}}次出价</span>
                                </div>
                                <div>
                                    <i class="el-icon-star-on" :class="[val.isfollow == 1? 'red' : '']" style="font-size:16px" @click="attentionStar2(val.id)"></i>
                                    <span>关注</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    </div>  
                </li>
            </ul>
      </div>
    </div>
    <!-- 合作企业 -->
    <div class="warp enterprise">
      <!-- <v-title
        :content="content3"
        :font-size="22"
        class="tit"
      /> -->
      <div class="tit_new">
        <span class="red_w">热门</span>
        <span class="black">合作企业</span>
      </div>
      <div class="enter_content">
        <el-card shadow="hover" v-for="item in BussinessList" :key="item.id">
          <div class="enter_item">
            <img style="width:52px;height:52px" :src="imgurls+item.image" alt="">
            <!-- <img src="http://192.168.1.66/uploads/20220723/5239e9cf229595c4b29d9806e6681918.png" alt=""> -->
            <p>{{item.name}}</p>
          </div>
        </el-card>
      </div>
      
      
    </div>

  </div>
</template>
<script>
import {homeIndex,lotsList,clickFollow } from '@/api/interface'
import {getUserInfoID} from '@/utils/auth'
import layoutSwiper from './layout/swiper.vue'
import auctioneerCard from './auctioneer/auctionCard.vue'
import vTitle from '@/components/title/a-tip.vue'
import vBtn from '@/components/title/b-btn.vue'
import { time } from 'echarts/core';
export default {
  name: 'home',
  components:{
    layoutSwiper,auctioneerCard,
    vTitle,vBtn
  },
  data() {
    return {
      userInfo:{
        username:'',
        mobile:''
      },
      uid:'',
      bannerData:[], //轮播图信息
      LotsTypeData:[],//标的类型信息
      ProvinceData:[], //省份信息
      AdvList:[], //入驻
      LotsData:[], //拍卖标的
      DealLots:[], //成交案例
      BussinessList:[],//合作企业
      content:'拍卖标的',
      content1:'成交案例',
      content3:'合作企业',
      // flowArr:[
      //   {line:'第一步',flowCon:'认证注册',icon:'el-icon-user-solid'},
      //   {line:'第二步',flowCon:'拍前准备',icon:'el-icon-document'},
      //   {line:'第三步',flowCon:'报名交保证金',icon:'el-icon-coin'},
      //   {line:'第四步',flowCon:'出价竞拍',icon:'el-icon-s-flag'},
      //   {line:'第五步',flowCon:'竞拍成功',icon:'el-icon-s-check'}, 
      //   {line:'第六步',flowCon:'办理交割',icon:'el-icon-guide'},
      // ], //竞拍流程
      flowArr:[
        {line:'第一步',flowCon:'阅读公告',url:require('@/assets/home/jp_icon01.png')},
        {line:'第二步',flowCon:'实地看货',url:require('@/assets/home/jp_icon02.png')},
        {line:'第三步',flowCon:'报名交保证金',url:require('@/assets/home/jp_icon03.png')},
        {line:'第四步',flowCon:'出价竞拍',url:require('@/assets/home/jp_icon04.png')},
        {line:'第五步',flowCon:'竞拍成功',url:require('@/assets/home/jp_icon05.png')},
        {line:'第六步',flowCon:'线下提货',url:require('@/assets/home/jp_icon06.png')},
      ], //竞拍流程
    };
  },
  created(){


    // this.$alert(res.msg+'点击确认跳转至登录页', '提示', {
    //                             confirmButtonText: '确定',
    //                             callback: action => {
    //                                 this.$router.push({path:'/login'});
    //                             }
    //                         });
    var info = getUserInfoID();
    if(info){
      this.userInfo.username =JSON.parse(info).username;
      var tel = "" + JSON.parse(info).mobile;
      var tel1 =tel.replace(tel.substring(3,7), "****")
      this.userInfo.mobile =tel1;
      this.uid = JSON.parse(info).id;
    }else{
      this.uid = '';
    }

    this.$emit('public_header',  {header:true,footer:true});
    this.getHomeData();
    // 
    this.getLotsCardList({uid:this.uid,state:'3',page:1,limit:12});
  },
  mounted(){
    
  },
  filters: {
        formatNumber(value) {
            if (value >= 10000) {
            return (value / 10000).toFixed(2) + '万';
            }
            return value;
        }
    },
  methods: {
    getHomeData(){
      homeIndex({uid:this.uid}).then(res =>{
        this.bannerData = res.data.BannerData; //轮播图
        this.AdvList = res.data.AdvList; //企业入驻图片
        this.ProvinceData = res.data.ProvinceData; //省份信息
        this.LotsTypeData = res.data.LotsTypeData;//标的类型信息
        this.BussinessList = res.data.BussinessList; //合作企业
        res.data.LotsData.forEach(item => {
          item.time = this.timestampToTime(item.time);
        });
        this.LotsData = res.data.LotsData;
      })
    },
    timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '年';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
        var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + '日';
        var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes());
        // return Y+M+D+h+m+s;
        return Y+M+D+h+m;
    },
    helpGo(only){
      // this.$router.push({path:'/',query: {lotsId:val.id,auctionid:val.auction_id}}) 
      this.$router.push({path:'/helpCenter',query:{avticeID:only}})                        
    },
    // 省市跳转
    adressGoLots(id){
      this.$router.push({path:'/lots',query: {provinceId:id}});
    },
    // 标的类型
    lotsTypeGoLots(id){
      this.$router.push({path:'/lots',query: {typeId:id}});
    },
    getLotsCardList(newObj){
      lotsList(newObj).then(res=>{
          if(res.code == 200){
              res.data.forEach(item => {
                item.time = this.timestampToTime(item.time);
              })
              this.DealLots=res.data;
          }
      }).catch(err=>{
      });
    },
    getLotsCardList1(newObj){
      // console.log('newObj',newObjtate)
      lotsList(newObj).then(res=>{
          if(res.code == 200){
              res.data.forEach(item => {
                item.time = this.timestampToTime(item.time);
                  this.LotsData.push(item);
              });
          }
      }).catch(err =>{ 
      });
    },
    routeDetail(val){ 
        let {href}= this.$router.resolve({
            path: '/lots/detail',   // 这里写的是要跳转的路由地址
            query: {lotsId:val.id,auctionid:val.auction_id}// 这里写的是页面参数
        });
        window.open(href, '_blank');
    },
    //星星关注
    attentionStar2(id){
        clickFollow({id:this.uid,lots_id:id}).then(res =>{
            if(res.code == 200){
              this.getLotsCardList({uid:this.uid,state:'3',page:1,limit:12});
            }
        });
    },
    attentionStar(){
      clickFollow({id:this.uid,lots_id:id}).then(res =>{
            if(res.code == 200){
              this.getHomeData();
            }
        });
    },
    // 点击立即入驻图片，跳转至企业入驻页面
    gofirmInPage(){
      this.$router.push({ path: '/firmIn' });
    },
    goWasteShoppingPage(only){
      if(this.uid){
        this.$router.push({ path: '/wasteShopping/applyFor',query: {type:only} });
        window.scrollTo(0, 0);
      }else{
        this.$message({
            message: '请先登录',
            type: 'warning'
        });
      }
      
    },
    goCaseLibrary(){
      this.$router.push({ path: '/caseLibrary' });
      window.scrollTo(0, 0);
    },
    goLots(){
      this.$router.push({ path: '/lots' });
      window.scrollTo(0, 0);
    },
    goMycanpai(){
      this.$router.push({path:'/userCenter/userInfo',query: {index:'2'}});
    },
    goMyguanzhu(){
      this.$router.push({path:'/userCenter/userInfo',query: {index:'4'}});
    },
  },
};
</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.home{
  text-align: left;
  .tit_new{
    height: 70px;
    line-height: 70px;
    font-weight: 700;
    font-size: 26px;
    .black{
      color: #242d3d;;
    }
    .red_w{
      color: #e50012;
    }
  }
  .btn_style{
    width: 100%;
    color: @base-color;
    background: #fff;
    border: 1px solid @base-color;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box; 
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    i{
      margin-right: 6px;
      // font-size: 16px;
    }
  }
  .btn_line{
    width: 80px;
    height: 32px;
    background-color: #fff;
    border:1px solid @base-color;
    color: @base-color;
    border-radius: 5px;
    margin-right: 10px;
  }
  .layout_box{
    background-color: #e9eef6;
    .layout{
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      .block{
        width: 696px;
        height: 420px; 
      }
      .help_r{
        width: 240px;
        height: 420px;
        background-color: #fff;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
        border-radius: 6px;
        background-image: url('@/assets/home/login_bg_new.png');
        background-size:contain;
        background-repeat: no-repeat;
        div{
          // background-color: #fff;
        }
        .help_r_first{
          padding: 10px 0;
          text-align: center;
          border-top-right-radius: 6px;
          border-top-left-radius:6px;
          
          .login_suc{
            padding: 0 10px;
            .head_portrait{
              display: flex;
              align-items: center;
              padding: 14px 0;
              .name_r{
                margin-left: 10px;
                .name_up{
                   color: #333;
                   margin-bottom: 10px;
                   text-align: left;
                }
                .ophone_down{
                  font-size: 12px;
                  color: #999;
                }
              }
            }
            .my_type{
              padding-bottom: 10px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              .my_cp{
                background-image: url('@/assets/home/mycp.png');
                width: 90px;
                height: 60px;
                border-radius: 6px;
                cursor: pointer;
                span{
                  display: inline-block;
                  color: #fff;
                  font-size: 13px;
                  padding-top: 14px;
                }
              }
              .my_gz{
                background-image: url('@/assets/home/mysc.png');
                width: 90px;
                height: 60px;
                border-radius: 6px;
                cursor: pointer;
                span{
                  display: inline-block;
                  color: #fff;
                  font-size: 13px;
                  padding-top: 14px;
                }
              }
            }
          }
          .login_header_c{
            .welcome_w{
              height: 42px;
              line-height: 42px;
              font-size: 12px;
              color: #242d3d;
            }
            .login_btn_two{
              margin-bottom: 20px;
              .btn_l{
                width: 80px;
                height: 32px;
              }
            }
          }
          .h_first_title{
            color: @base-color;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            p{
              vertical-align: middle;
              display: inline-block;
            }
            .line{
              margin: 0 10px;
              width: 44px;
              height: 1px;
              background-color: @base-color;
            }
          }
          .h_first_one{
            p{
              margin-bottom: 10px;
              span{
                display: inline-block;
                width: 116px;
                font-size: 14px;
                color: #606266;
                cursor: pointer;
              }
            }
            
          }
        }
        .help_r_second{
          margin-top: 10px;
          text-align: center;
          padding: 10px 20px;
          .h_second_title{
            color: @base-color;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            p{
              vertical-align: middle;
              display: inline-block;
            }
            .line{
              margin: 0 10px;
              width: 44px;
              height: 1px;
              background-color: @base-color;
            }
          }
          .h_second_con{
            .phone{
              font-size: 18px;
              font-weight: 600;
              padding: 10px;
              margin: 16px 10px;
              color: @base-color;
            }
            .s_c_btn{
              margin: 0;
              font-weight: 500;
              padding: 12px 20px;
              font-size: 14px;
              background: rgb(248,247,247);
              border-radius: 4px;
              cursor: pointer;
              i{
                vertical-align: middle;
                font-size: 22px;
                font-weight: 600;
                color: @base-color;
                margin-right: 10px;
              }
            }
          }
        }
        .help_r_third{
          margin-top: 10px;
          padding: 10px 20px;
          text-align: center;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;
          .r_t_btn{
            margin-bottom: 10px;
          }
         
          .btn_style:hover{
            background: @base-color;
            color: #fff;
          }
        }
      }
      .adress{
        // border: 1px solid #f73e3798;
        background-color: #fff;
        width: 210px;
        height: 400px;
        padding: 10px;
        border-radius: 6px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
        .bdType{
          ul{
            font-size: 12px;
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,60px);
            grid-gap: 14px;
            li{
              width:60px;
            }
          }
        }
        .bdAdress{
          margin-top: 10px;
          ul{
            font-size: 12px;
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,40px);
            grid-gap: 14px;
            li{
              width:50px;
            }
          }
        }
        .Title{
            display: flex; 
            align-items: center;
            margin-bottom: 10px;
            H3{
              padding-left: 4px;
              color: @base-color;
            }
        .bgc{
              color: @base-color;
              font-size: 20px;
            }  
          }

      }
    }
    // 企业入驻图片
    .img_type{
      display: flex;
      justify-content: space-between;
      div{
        width: 590px;
        
        img{
          width: 100%;
          border-radius: 6px;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
        }
      }
    }
    // 竞拍流程
    .auctionFlow{
      padding: 20px 0 26px 0;
      .af_line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        background-color: #fff;
        padding-right: 6px;
        border-radius: 6px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .1);
        
        dt{
          padding: 13px 38px;
          width: 42px;
          height: 74px;
          line-height: 34px;
          font-size: 20px;
          font-weight: 700;
          background: #f8f7f7;
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
          a{
            text-decoration: none;
            color: @base-color;
          }
        }
        dd{
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: .1s;
          .icon_one{
            width: 66px;
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 6px;
            img{
              width: 48px;
              height: 48px;
            }
          }
          .icon_two{
            margin-right: 22px;
            .i_t_one{
              font-size: 14px;
              color: #999;
            }
            .i_t_two{
              color: #333;
              font-weight: 600;
            }
          }
          .icon_red{
            color: #f17f7f;
          }
        }
        dd:hover{
          color: @base-color;
          .icon_one{
            background-color: #f6f3f4;
            border-radius: 33px;
          }
          .icon_two{
            p{
              color: @base-color;
            }
            
          }
        }
      }
    }
  }
 
  // 合作企业
  .enterprise{
    margin-top: 20px;
    .tit{
      margin-bottom: 10px;
    }
    .enter_content{
      display: flex;
      flex-wrap:wrap;
      justify-content: space-between;
      .el-card{
        width: 284px;
        margin-bottom: 20px;
        border-radius: 8px;
        .enter_item{
          display: flex;
          align-items: center;
          img{
            margin-right: 12px;
          }
        }
        
        
      }
    }
  }
  
  
  .moneyBig{
        font-size: 20px;
        font-weight: 400;
        margin-left: 4px;
        margin-top: 4px;
    }
  // 拍卖标的
  // 成交案例
  .makeBargain{
    margin-top: 20px;
    .style_tit_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .evenMore{
        font-size: 12px;
        padding-right: 10px;
        color: #666;
      }
    }
    .tit{
      margin-bottom: 10px;
    }
  }

  .card{
  .red{
        color: #d13a29;
    }
    .pai-item-list{
      // display: flex;
      // flex-wrap:wrap;
      // justify-content: space-between;
      // &::after{
      //   content: '';
      //   // flex: auto;
      //   width: 280px;
      // }
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill,280px);
      grid-gap: 16px;
      .link_wrap{
        position: relative;
        display: inline-block;
        width: 280px;
        height: 348px;
        text-decoration: none;
        // .link_wrap:hover{
          // border: 2px solid #67C23A;
        // }
        .item_card{
          border-radius: 8px;
           
            .image {
              height: 190px;
              .lot_pic{
                display: block;
                width: 100%;
                height: 190px;
                /deep/.el-image__inner{
                  object-fit: cover;
                }
              }
              .img-mask {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 30px;
                    /* 移除背景、毛玻璃、阴影，仅保留定位和flex */
                    background: none;
                    backdrop-filter: none;
                    box-shadow: none;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    z-index: 2;
                    /* 不要padding */
                    .redBtn {
                        display: flex;
                        align-items: center;
                        background: linear-gradient(90deg, fade(@base-color,90%) 60%, fade(@base-color,60%) 100%);
                        color: #fff;
                        font-size: 14px;
                        font-weight: 500;
                        border-radius: 10px 10px 16px 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 18px 0 16px;
                        box-shadow: 0 1px 6px rgba(228,61,51,0.10);
                        letter-spacing: 0.5px;
                        border: none;
                        margin-left: 0;
                        transition: box-shadow 0.2s, background 0.2s;
                        .wait-icon {
                            margin-right: 6px;
                            margin-left: 0;
                            display: block;
                            height: 18px;
                            width: 18px;
                        }
                    }
                    .greenBtn {
                        display: flex;
                        align-items: center;
                        background: linear-gradient(90deg, fade(#67C23A,90%) 60%, fade(#67C23A,60%) 100%);
                        color: #fff;
                        font-size: 14px;
                        font-weight: 500;
                        border-radius: 10px 10px 16px 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 18px 0 16px;
                        box-shadow: 0 1px 6px rgba(228,61,51,0.10);
                        letter-spacing: 0.5px;
                        border: none;
                        margin-left: 0;
                        transition: box-shadow 0.2s, background 0.2s;
                        .wait-icon {
                            margin-right: 6px;
                            margin-left: 0;
                            display: block;
                            height: 18px;
                            width: 18px;
                        }
                       
                    }
                     .grayBtn {
                        display: flex;
                        align-items: center;
                        background: linear-gradient(90deg, fade(#909399,90%) 60%, fade(#909399,60%) 100%);
                        color: #fff;
                        font-size: 14px;
                        font-weight: 500;
                        border-radius: 10px 10px 16px 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 18px 0 16px;
                        box-shadow: 0 1px 6px rgba(228,61,51,0.10);
                        letter-spacing: 0.5px;
                        border: none;
                        margin-left: 0;
                        transition: box-shadow 0.2s, background 0.2s;
                        .wait-icon {
                            margin-right: 6px;
                            margin-left: 0;
                            display: block;
                            height: 18px;
                            width: 18px;
                        }
                    }
                }
            }
          
          .item_content{
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 8px;           
            .item_title{
              height: 56px;
              font-size: 18px;
              .in_item_title{
                  display: -webkit-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                   font-weight: 700;
              }

            }
            .item_money{
              font-size: 14px;
              color: #606266;
              .m_rmb{
                font-size: 12px;
              }
              .item_money_time{
                // p{
                //   // display: inline-block;  
                // }
                
                // p:last-of-type{
                //   font-size: 12px;
                //   font-weight: 400;
                //   position: absolute;
                //   right: 0px;
                //   height: 20px;
                //   line-height: 20px;
                //   text-align: center;
                //   border-radius: 12px 0px 0px 12px;
                //   color: #fff;
                //   padding: 0 6px 0 10px;
                // }
              }
            }
            .item_money{
              p{
                margin-bottom: 10px;
              }
            }
            .item_bottom{
              height: 32px;
              border-top: 1px solid rgb(237, 237, 237);
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: rgb(153, 153, 153);
              font-size: 12px;
            }
          }
        }
        .item_card:hover{
            border: 1px solid #DF0000;
          }

        
        
      }
    }

}
  
}


  
  
  


</style>